<script setup>
import { ref } from 'vue'
import HmSon from './components/HmSon.vue'

/*
  ref:
    1:定义响应式数据
       import {ref} from 'vue'
       const xxx=ref(0)
       xxx.value
    2：获取原生标签dom
       a:  import {ref} from 'vue'
       b:  const xxx=ref(null/空) 
       c:  <div ref='xxx'>...</div>
       d:xxx.value就是div的dom

    3:获取组件标签的实例对象(子组件有暴露出来的东西你才可拿到)
      a:  import {ref} from 'vue'
      b:  const xxx=ref(null/空) 
      c:子组件标签上绑定  ref='xxx'
      d:子组件要暴露相应的方法或者属性
          defineExpose({需要暴露的属性或者方法})
      f:调用子组件的暴露的属性或者方法
         xxx.value.暴露的属性或者方法的调用

*/
const num = ref(0)
const h1dom = ref()
// console.log('xxxx', h1dom.value)
// 获取dom
const btnClick = () => {
  console.log(h1dom.value)
}

// 获取组件的实例对象
const sonCom = ref()
const btnClick2 = () => {
  sonCom.value.validate()
  // console.log(sonCom.value)
}
</script>

<template>
  <div class="app-page">
    <h1 ref="h1dom">{{ num }}</h1>
    <button @click="btnClick">获取h1标签的dom</button>
  </div>
  <hr />
  <HmSon ref="sonCom"></HmSon>
  <button @click="btnClick2">获取son子组件实例对象</button>
</template>

<style lang="scss" scoped></style>
